<template>
  <div class="h-full w-full">
    <div class="h-1/10 w-full flex items-center justify-between">
      <div>
        <el-pagination
          v-model:current-page="page"
          v-model:page-size="size"
          :page-sizes="[12, 20, 30, 40]"
          size="default"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      <div>
        <el-button type="primary" color="#b4b4e5" size="large" @click="refresh">
          <img src="/src/assets/svg/007.svg" class="w-8 mr-2" />
          刷新
        </el-button>
                  <el-button
            type="primary"
            color="#b4b4e5"
            size="large"
            @click="dialogVisible = !dialogVisible"
          >
            <img src="/src/assets/svg/006.svg" class="w-5 mr-2" />
            新增座位
          </el-button>
      </div>
    </div>
    <div class="w-full h-9/10 overflow-auto">
      <el-table
        v-loading="loading"
        element-loading-text="加载中..."
        class="rounded-2xl"
        :data="trainSeatList"
        style="width: 100%"
        border
        stripe
        size="large"
      >
          <el-table-column prop="id" label="id" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="trainCode" label="车次编号" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="carriageIndex" label="厢序" >
          </el-table-column>
          <el-table-column prop="row" label="排号" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="col" label="列号" show-overflow-tooltip>
              <template #default="scope">
                <!-- 根据SEAT_COL_ARRAY -->
                {{ SEAT_COL_ARRAY.find((item) => item.code === scope.row.type)?.desc || '未知类型' }}
              </template>
          </el-table-column>
          <el-table-column prop="seatType" label="座位类型" show-overflow-tooltip>
              <template #default="scope">
                <!-- 根据SEAT_TYPE_ARRAY -->
                {{ SEAT_TYPE_ARRAY.find((item) => item.code === scope.row.type)?.desc || '未知类型' }}
              </template>
          </el-table-column>
          <el-table-column prop="carriageSeatIndex" label="同车厢座序" >
          </el-table-column>
          <el-table-column prop="createTime" label="新增时间" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="updateTime" label="修改时间" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="操作" class="flex">
            <template #default="scope">
              <div>
              <el-button size="small" @click="edit(scope)">编辑</el-button>
              </div>
              <div>
              <el-popconfirm
                title="确认删除吗？"
                :icon="InfoFilled"
                icon-color="#626AEF"
                cancel-button-text="取消"
                confirm-button-text="确认"
                confirm-button-type="success"
                @confirm="deleteTrainSeat(scope.row.id)"
              >
                <template #reference>
                  <el-button type="danger" size="small">删除</el-button>
                </template>
              </el-popconfirm>
              </div>
            </template>
          </el-table-column>
      </el-table>
    </div>
  </div>
    <el-dialog
      v-model="dialogVisible"
      title="座位"
      width="400"
      :before-close="handleClose"
      align-center
    >
      <el-form size="large" :model="trainSeatForm">
            <el-form-item label="车次编号" prop="trainCode">
                <el-input placeholder="请输入车次编号" v-model="trainSeatForm.trainCode"></el-input>
            </el-form-item>
            <el-form-item label="厢序" prop="carriageIndex">
                <el-input placeholder="请输入厢序" v-model="trainSeatForm.carriageIndex"></el-input>
            </el-form-item>
            <el-form-item label="排号" prop="row">
                <el-input placeholder="请输入排号" v-model="trainSeatForm.row"></el-input>
            </el-form-item>
            <el-form-item label="列号" prop="col">
                <el-select placeholder="请选择列号" v-model="trainSeatForm.col">
                  <el-option
                    v-for="item in SEAT_COL_ARRAY"
                    :key="item.code"
                    :label="item.desc"
                    :value="item.code"
                  ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="座位类型" prop="seatType">
                <el-select placeholder="请选择座位类型" v-model="trainSeatForm.seatType">
                  <el-option
                    v-for="item in SEAT_TYPE_ARRAY"
                    :key="item.code"
                    :label="item.desc"
                    :value="item.code"
                  ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="同车厢座序" prop="carriageSeatIndex">
                <el-input placeholder="请输入同车厢座序" v-model="trainSeatForm.carriageSeatIndex"></el-input>
            </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="confirm" color="#b4b4e5" :loading="loading1">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
</template>

<script setup lang="ts">
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { onMounted, ref } from 'vue'
import { SEAT_COL_ARRAY } from '@/assets/ts/enums'
import { SEAT_TYPE_ARRAY } from '@/assets/ts/enums'
import { InfoFilled } from '@element-plus/icons-vue'

const page = ref(1)
const size = ref(12)
const total = ref(0)

const loading = ref(false) // 表格加载
const dialogVisible = ref(false)
const loading1 = ref(false) // 新增或编辑TrainSeat后加载
const loading2 = ref(false) // 删除TrainSeat后加载
const trainSeatList = ref()

interface TrainSeatForm {
  id: string
  trainCode: string
  carriageIndex: number
  row: string
  col: string
  seatType: string
  carriageSeatIndex: number
  createTime: string
  updateTime: string
}
const trainSeatForm = ref<TrainSeatForm>({
  id: '',
  trainCode: '',
  carriageIndex: 0,
  row: '',
  col: '',
  seatType: '',
  carriageSeatIndex: 0,
  createTime: '',
  updateTime: '',
})
// 编辑TrainSeat信息
const edit = (scope: any) => {
  dialogVisible.value = true
  trainSeatForm.value = scope.row
}
// 删除TrainSeat信息
const deleteTrainSeat = (id: string) => {
  loading2.value = true
  axios.delete(`/business/train-seat/delete/${id}`).then((res) => {
    loading2.value = false
    if (res.data.success) {
      ElMessage.success('删除成功')
      queryTrainSeatList()
    } else {
      ElMessage.error(res.data.message)
    }
  })
}
// 刷新TrainSeat表格
const refresh = async () => {
  try {
    await queryTrainSeatList()
    ElMessage.success('刷新成功')
  } catch (e) {}
}
// 清空dialog中的TrainSeatForm表单
const clearTrainSeatForm = () => {
  trainSeatForm.value = {
    id: '',
    trainCode: '',
    carriageIndex: 0,
    row: '',
    col: '',
    seatType: '',
    carriageSeatIndex: 0,
    createTime: '',
    updateTime: '',
  }
}
// 查询TrainSeat列表
const queryTrainSeatList = () => {
  loading.value = true
  return axios
    .get('/business/train-seat/query-list', {
      params: {
        page: page.value,
        size: size.value,
      },
    })
    .then((res) => {
      loading.value = false
      trainSeatList.value = res.data.content.list
      total.value = res.data.content.total
    })
    .catch((error) => {
      loading.value = false
      throw error
    })
}
// 页面加载时查询TrainSeat列表
onMounted(() => {
  queryTrainSeatList()
})
// 关闭dialog前的操作
const handleClose = () => {
  dialogVisible.value = false
  clearTrainSeatForm()
  queryTrainSeatList()
}
// 取消编辑或新增TrainSeat
const cancel = () => {
  handleClose()
}
// 新增或编辑TrainSeat
const confirm = () => {
  loading1.value = true
  axios.post('/business/train-seat/save', trainSeatForm.value).then((res) => {
    loading1.value = false
    if (res.data.success) {
      queryTrainSeatList()
      ElMessage.success('操作成功')
      handleClose()
    } else {
      ElMessage.error(res.data.message)
    }
  })
}
// 分页器
const handleSizeChange = (val: number) => {
  size.value = val
  queryTrainSeatList()
}
// 分页器
const handleCurrentChange = (val: number) => {
  page.value = val
  queryTrainSeatList()
}
</script>

<style lang="scss" scoped></style>